/**
 * 路由配置
 * 1. 安装：npm i react-router-dom
 * 2. 导入路由的三个核心组件：Router / Route / Link
 * 3. 使用 Router 组件包裹**整个应用**（重要）
 * 4. 使用 Route 组件配置路由规则和要展示的组件（路由出口）
 * 5. 使用 Link 组件作为导航菜单（路由入口）
 */
import React, { Component } from "react";

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  NavLink,
  Redirect,
  withRouter,
} from "react-router-dom";

import Login from "./login";

// 二级路由
const AboutTwo = () => {
  return (
    <div>
      <h2>about的二级路由</h2>
      <p>地址：黑马程序员顺义校区马坡镇</p>
    </div>
  );
};
// 关于我们(一级路由)
const About = (props) => {
  console.log("获取传递的参数：", props.location);
  return (
    <div>
      <h1>About</h1>
      {/* 二级路由 */}
      <Link to="/about/contact">联系我们</Link>
      <Route path="/about/contact" component={AboutTwo} />
    </div>
  );
};

// 新闻
const News = (props) => {
  console.log("新闻：", props);
  // 获取动态路由的参数
  const { id, name } = props.match.params;
  return (
    <div>
      <h1>news</h1>
      <p>
        {id},{name}
      </p>
    </div>
  );
};

// 首页组件(没有经过路由配置)
const Child1 = (props) => {
  console.log("首页下的子组件：", props);
  return (
    <div>
      <h2>首页的子组件</h2>
      <button
        onClick={() => {
          // props.history.push("/about");
          // 传递参数
          props.history.push({
            // 跳转的路由路径
            pathname: "/about",
            // 传递参数
            a: 1,
            data: { a: 100, b: [] },
          });
        }}
      >
        go
      </button>
    </div>
  );
};
// 路由高阶组件=》增强Child1=》获取路由属性和方法
const NewChild1 = withRouter(Child1);

class Home extends Component {
  render() {
    console.log("首页：", this.props);
    const { go, goBack } = this.props.history;

    return (
      <div>
        <h1>Home</h1>
        <button
          onClick={() => {
            // go(-1);
            goBack();
          }}
        >
          路由跳转
        </button>
        <hr />
        {/* <Child1 {...this.props} /> */}
        <NewChild1 />
      </div>
    );
  }
}

// 404组件（不存在到路由配置）
const NotFound = () => {
  return (
    <div>
      <h1>迷路了吗？</h1>
      <p>
        <Link to="/home">带你回家</Link>
      </p>
    </div>
  );
};

// 路由守卫组件（函数组件）=>复用
const Auth = ({ path, component: Com }) => {
  // 模版
  return (
    <Route
      path={path}
      render={(props) => {
        console.log("render:", props);
        // 获取本地存储的token
        let token = localStorage.getItem("hm_token");
        if (token) {
          return <Com {...props} />;
        } else {
          return <Redirect to="/login" />;
        }
      }}
    />
  );
};

// 根组件
class App extends Component {
  // 模版
  render() {
    return (
      <Router>
        {/* 导航路由 */}
        <div className="nav">
          <NavLink to="/home">首页</NavLink>
          <NavLink to="/news/123/name">新闻</NavLink>
          <NavLink to="/about">关于我们</NavLink>
        </div>
        {/* 配置路由规则 */}
        <Switch>
          {/*路由重定向 */}
          <Redirect exact from="/" to="/home" />
          {/* 首页 */}
          <Auth path="/home" component={Home} />
          {/* <Route path="/home" component={Home} /> */}
          {/* <Route
            path="/home"
            render={(props) => {
              console.log("render:", props);
              // 获取本地存储的token
              let token = localStorage.getItem("hm_token");
              if (token) {
                return <Home {...props} />;
              } else {
                return <Redirect to="/login" />;
              }
            }}
          /> */}
          {/* 关于我们 */}
          {/* <Route path="/about" component={About} /> */}
          <Auth path="/about" component={About} />
          {/* 登录 */}
          <Route path="/login" component={Login} />
          {/* 动态路由=>detail */}
          <Route path="/news/:id/:name" component={News} />
          {/* 404组件 */}
          <Route component={NotFound} />
        </Switch>
      </Router>
    );
  }
}

export default App;
